<template>
    <div class="unauthorized-container">
        <canvas ref="canvas" class="three-canvas"></canvas>
        <div class="content">
            <h1 class="error-code">401</h1>
            <h2 class="error-title">未授权访问</h2>
            <p class="error-message">您还没有访问权限！</p>
            <div class="actions">
                <button @click="router.push('/')" class="home-button">去登录</button>
                <button @click="router.go(-2)" class="home-button">返回</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { router } from "@/router";

const canvas = ref<HTMLCanvasElement | null>(null);

let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let controls: OrbitControls;
let cubes: THREE.Mesh[] = [];
let animationId: number;

const initThreeJS = () => {
    if (!canvas.value) return;

    // 初始化场景
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x9F79EE); // 深蓝色背景

    // 初始化相机
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 30;

    // 初始化渲染器
    renderer = new THREE.WebGLRenderer({ canvas: canvas.value, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);

    // 添加控制器
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    // 添加环境光和方向光
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    // 创建多个立方体
    const geometry = new THREE.BoxGeometry(2, 2, 2);
    const blueMaterials = [new THREE.MeshBasicMaterial({ color: 0x1e90ff }), new THREE.MeshBasicMaterial({ color: 0x00bfff }), new THREE.MeshBasicMaterial({ color: 0x87cefa }), new THREE.MeshBasicMaterial({ color: 0x4682b4 }), new THREE.MeshBasicMaterial({ color: 0x4169e1 }), new THREE.MeshBasicMaterial({ color: 0x0000ff })];

    for (let i = 0; i < 20; i++) {
        const material = blueMaterials[i % blueMaterials.length];
        const cube = new THREE.Mesh(geometry, material);

        // 随机位置
        cube.position.x = (Math.random() - 0.5) * 50;
        cube.position.y = (Math.random() - 0.5) * 50;
        cube.position.z = (Math.random() - 0.5) * 50;

        // 随机旋转
        cube.rotation.x = Math.random() * Math.PI;
        cube.rotation.y = Math.random() * Math.PI;

        // 随机大小
        const scale = 0.5 + Math.random() * 1.5;
        cube.scale.set(scale, scale, scale);

        scene.add(cube);
        cubes.push(cube);
    }

    // 添加粒子系统
    const particlesGeometry = new THREE.BufferGeometry();
    const particlesCount = 1000;
    const posArray = new Float32Array(particlesCount * 3);

    for (let i = 0; i < particlesCount * 3; i++) {
        posArray[i] = (Math.random() - 0.5) * 100;
    }

    particlesGeometry.setAttribute("position", new THREE.BufferAttribute(posArray, 3));
    const particlesMaterial = new THREE.PointsMaterial({
        size: 0.1,
        color: 0x1e90ff,
        transparent: true,
        opacity: 0.8,
    });
    const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
    scene.add(particlesMesh);

    // 窗口大小调整
    window.addEventListener("resize", onWindowResize);
};

const onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
};

const animate = () => {
    animationId = requestAnimationFrame(animate);

    // 旋转立方体
    cubes.forEach((cube, index) => {
        cube.rotation.x += 0.01 * ((index % 3) + 1);
        cube.rotation.y += 0.01 * ((index % 2) + 1);

        // 上下浮动效果
        cube.position.y = cube.position.y + Math.sin(Date.now() * 0.001 + index) * 0.05;
    });

    controls.update();
    renderer.render(scene, camera);
};

onMounted(() => {
    initThreeJS();
    animate();
});

onUnmounted(() => {
    window.removeEventListener("resize", onWindowResize);
    cancelAnimationFrame(animationId);

    if (controls) controls.dispose();
    if (renderer) renderer.dispose();
});
</script>

<style scoped lang="less">
@blue-primary: #1e90ff;
@blue-dark: #001133;
@blue-light: #87cefa;
@blue-accent: #00bfff;

.unauthorized-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .three-canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        color: white;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 90%;
        max-width: 800px;
        padding: 2rem;
        background: rgba(41, 79, 155, 0.7);
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(15, 16, 17, 0.5);
        animation: fadeIn 1.5s ease-out;
        backdrop-filter: blur(5px);

        .error-code {
            font-size: 8rem;
            margin: 0;
            color: @blue-primary;
            text-shadow: 0 0 20px @blue-accent;
            animation: pulse 2s infinite;
        }

        .error-title {
            font-size: 2.5rem;
            margin: 1rem 0;
            color: @blue-light;
        }

        .error-message {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;

            button {
                padding: 0.8rem 2rem;
                border: none;
                border-radius: 50px;
                font-size: 1rem;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 1px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

                &:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
                }

                &:active {
                    transform: translateY(1px);
                }
            }

            .home-button {
                background: linear-gradient(45deg, @blue-primary, @blue-accent);
                color: white;
            }

            .reload-button {
                background: transparent;
                color: @blue-light;
                border: 2px solid @blue-light;

                &:hover {
                    background: rgba(135, 206, 250, 0.2);
                }
            }
        }
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes pulse {
    0% {
        opacity: 0.8;
        text-shadow: 0 0 10px @blue-accent;
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 30px @blue-primary;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 10px @blue-accent;
    }
}

@media (max-width: 768px) {
    .unauthorized-container {
        .content {
            .error-code {
                font-size: 5rem;
            }
            .error-title {
                font-size: 1.8rem;
            }
            .error-message {
                font-size: 1rem;
            }
        }
    }
}
</style>
